<template>
	<view>
		<image class="mapicon" :src="imgUrl + 'plus.png'" mode="heightFix"></image>
		<view class="map-wrapper">
			<map class="bm-view" :latitude="center.lat" :longitude="center.lng" @updated="handler"></map>
		</view> 
		<view class="btn_box">
			<u-button type="primary" shape="circle" class="btn" native-type="button" @click="confirm">确定</u-button>
		</view>

		<u-search v-model="keyword" class="search search-float" placeholder="请输入关键词" />
		<u-popup v-model="showList" position="bottom" :lock-scroll="false" :style="{ height: '70%' }">
			<u-cell-group>
				<u-cell-item v-for="(item, index) in dataset" :key="index" :title="item.title" :label="item.address"
					@click="handlerItem(item)" />
			</u-cell-group>
		</u-popup>
	</view>
</template>

<script>
	import Vue from 'vue'
	// import store from '@/store'
	import { mapState } from 'vuex'
	Vue.component('BaiduMap', function(resolve, reject) {
		require(['vue-baidu-map/components/map/Map.vue'], resolve)
	})
	export default {
		name: 'Mapset',
		props: ['mapLat', 'mapLng', 'mapZoom', 'address'],
		data() {
			return {
				imgUrl:getApp().globalData.imgUlr,
				location: '',
				dataset: [],
				showList: false,
				keyword: '',
				center: {
					lng: 0,
					lat: 0
				},
				zoom: 12,
				BMap: {},
				map: {},
				mapData: {
					lat: '',
					lng: '',
					zoom: 0,
					address: ''
				}
			}
		},
		mounted() {
			if(this.mapLat > 0 && this.mapLng > 0){
				this.handler()
			} else{
				let valStr =  parseFloat(this.$store.state.config.map_lng) + ',' + parseFloat(this.$store.state.config.map_lat)
				let coordinateStr = this.bd2gcjString(valStr,'GAODE')
				let coordinateAry = coordinateStr.split(',')
				this.center = {
					lat: parseFloat(coordinateAry[1]),
					lng: parseFloat(coordinateAry[0]) 
				}
				this.zoom = parseInt(this.$store.state.config.map_zoom)
				this.dataset = []
				this.keyword = ''
			}
		},
		computed: {
			...mapState({
				map_ak: state => state.config.map_ak
			})
		},
		methods: {
			setPosition(pt) {
				let _this = this
				var offsetY = 0
				var map = _this.map
				var BMap = _this.BMap
				map.panTo(pt)
				let centerPixel = map.pointToOverlayPixel(map.getCenter())
				map.setCenter(map.overlayPixelToPoint({
					x: centerPixel.x,
					y: centerPixel.y + offsetY
				}))
				map.addEventListener('dragend', function() {
					let pixel = map.pointToOverlayPixel(map.getCenter())
					let point = map.overlayPixelToPoint({
						x: pixel.x,
						y: pixel.y - offsetY
					})
					_this.mapData.zoom = map.getZoom()
					let geoc = new BMap.Geocoder()
					geoc.getLocation(point, function(rs) {
						var addComp = rs.addressComponents
						_this.mapData.address = addComp.province + addComp.city + addComp.district +
							addComp.street + addComp.streetNumber
					})
					_this.mapData.lat = point.lat
					_this.mapData.lng = point.lng
				})
			},
			setlocation() {
				let _this = this
				if (this.mapLat > 0 && this.mapLng > 0) {
					let valStr =  this.mapLng + ',' + this.mapLat
					let coordinateStr = this.bd2gcjString(valStr,'BAIDU')
					let coordinateAry = coordinateStr.split(',')
					this.center.lng = coordinateAry[0]
					this.center.lat = coordinateAry[1]
				} else {
					var geolocation = new BMap.Geolocation()
					geolocation.getCurrentPosition(
						function(r) {
							if (this.getStatus() === BMAP_STATUS_SUCCESS) {
								_this.setPosition(r.point)
							}
						}, {
							enableHighAccuracy: true
						}
					)
				}
			},
			handler() {
				console.log(3333333)
				this.setlocation()
			},
			handlerResult(result) {
				if (result === undefined) {
					return false
				}
				this.dataset = []
				for (var i = 0; i < result.getCurrentNumPois(); i++) {
					this.dataset.push(result.getPoi(i))
				}
				if (this.dataset.length > 0) {
					this.showList = true
				}
			},
			handlerItem(item) {
				this.map.panTo(item.point)
				let centerPixel = this.map.pointToOverlayPixel(this.map.getCenter())
				this.map.setCenter(this.map.overlayPixelToPoint({
					x: centerPixel.x,
					y: centerPixel.y
				}))
				this.mapData.zoom = this.map.getZoom()
				this.mapData.lat = item.point.lat
				this.mapData.lng = item.point.lng
				this.mapData.address = item.address
				this.showList = false
			},
			confirm() {
				if (this.mapData.lat == '') {
					this.mapData.lat = this.mapLat
				}
				if (this.mapData.lng == '') {
					this.mapData.lng = this.mapLng
				}
				if (this.mapData.address == '') {
					this.mapData.address = this.address
				}
				if (this.mapData.zoom == '') {
					this.mapData.zoom = this.mapZoom
				}
				this.keyword = ''
				this.$emit('closeMap', this.mapData)
			},
			handlerZoomend(e) {
				this.zoom = e.target.getZoom()
			},
			bd2gcjString(value, mapType) {
				if (mapType == 'BAIDU') {
					var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
					var ll = value.split(",");
					var x = ll[0] - 0.0065, y = ll[1] - 0.006;
					var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
					var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
					return (z * Math.cos(theta)) + ',' + (z * Math.sin(theta));
				} else if (mapType == 'GAODE') {
					return value;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn_box {
		width: 100%;
		position: absolute;
		bottom: 20rpx;

		.btn {
			width: 700rpx;
			margin: 0 auto;
			display: block;
		}
	}

	// body,
	// html {
	//   margin: 0;
	//   height: 100%;
	//   position: relative;
	// }
	.map-wrapper {
		width: 100%;
		height: 100%;
	}

	.bm-view {
		width: 100%;
		height: 100%;
		position: absolute;
		margin-top: -106rpx;
	}

	.search-float {
		position: absolute;
		left: 50%;
		top: 146rpx;
		transform: translate(-50%, 0);
		width: 680rpx;
		height: 70rpx;
		border-radius: 70rpx;
		z-index: 3001;

		.u-search__content {
			background-color: #ffffff;
		}
	}

	.mapicon {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-100%);
		width: 50rpx;
		height: 50rpx;
		z-index: 1;
	}
</style>
